$(function () {
    //1. 给注册按钮添加背景颜色
    var clolrFlag = 1;
    $(".checkbox").click(function () {
        if (clolrFlag == 1) {
            $(".register-btn").css("backgroundColor", "#f60");
            clolrFlag = 0;
        } else {
            $(".register-btn").css("backgroundColor", "#ccc");
            clolrFlag = 1;
        }

    })



    // 2.邮箱注册
    //一、 失去焦点触发事件，接口中验证邮箱是否重复
    var flagEmail = false;//全局变量
    $(".email").blur(function () {
        let emailVal = $(this).val();
        if (/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(emailVal)) {
            // 通过
            $.ajax({
                url: "http://139.9.177.51:3333/api/emailExist",
                type: "post",
                data: "email=" + emailVal,
                dataType: "json",
                success: function (res) {
                    /*{
                        "code":200,  //200表示成功，500表示失败,邮箱重复
                        "msg":"该邮箱可以使用",
                        "data":""
                    }*/
                    if (res.code == 200) {
                        // 邮箱合法
                        flagEmail = true;
                        $(".email").parent().removeClass("error").addClass("success");
                        $(".email").next().html("邮箱合法");
                    } else {
                        flagEmail = false;
                        // 邮箱重复
                        $(".email").parent().removeClass("success").addClass("error");
                        $(".email").next().html("邮箱已重复");
                    }
                }

            })


        } else {
            // 没有通过
            flagEmail = false;
            $(".email").parent().addClass("error");
            $(".email").next().html("邮箱不合法");
        }
    })
    // 二、点击注册按钮触发注册事件的接口

    $(".register-btn").click(function () {
        if (flagEmail == false) {
            $(".email").trigger("blur");  //trigger() 方法触发被选元素的指定事件类型。
            // 意思是再次触发上面失去焦点的函数事件
            return;  //如果 flagEmail==false 那么就不会发送下面的ajax请求，这个样子可以节约服务器的资源，不用一直请求占用服务器
        }
        $.ajax({
            url: "http://139.9.177.51:3333/api/reg",
            type: "post",
            data: "email=" + $(".email").val(),
            dataType: "json",
            success: function (res) {
                /*返回：res.code
                    {
                        "code":200,  //200表示成功，500表示失败
                        "msg":"",
                        "data":""
                    } */
                if (res.code == 200) {
                    alert("注册成功");
                } else {
                    alert("注册失败");
                }
            }
        })
    })
    // 手机号码合法验证
    // $(".tel-phone").click(function () {
    //     $(this).val("");
    // })
    // 判断手机号码
    // 验证手机号
    var phone = $(".tel-phone").val();
    function isPhoneNo(phone) {
        var pattern = /^1[34578]\d{9}$/;
        return pattern.test(phone);
    }
    $(".tel-phone").blur(function () {
        if ($.trim($('.tel-phone').val()).length == 0) {
            str = '手机号没有输入\n';
            $('.tel-phone').focus();
            console.log(str);
        } else {
            if (isPhoneNo($.trim($('.tel-phone').val()) == false)) {
                str = '手机号码不正确\n';
                $('.tel-phone').focus();
                console.log(str);
            }
        }
    })

})
